<template>
	<view>
		<view class="bg-white padding-tb-sm" v-if="select.show">
			<filter-shop :current="select.current" :list="select.list" v-on:select_change="select_change"></filter-shop>
		</view>

		<view class="text-df bg-white margin-top-com padding-sm border-radius" v-for="(item,index) in exchange_list"
			:key="index">
			<view @click="to_detail(item[0].exchangeId)">
				<view class="flex-row-bt">
					<view class="text-mid">{{item[0].createTime}}</view>
					<view v-if="item[0].exchangeStatus=='0'" class="theme-color">待取</view>
					<view v-else class="text-low">已取</view>
				</view>
				<view class="margin-top-sm flex-row-bt">
					<view class="flex-row">
						<image :src="imgURL+item[0].indexImg" mode="aspectFill"
							style="width: 200rpx; height: 180rpx; border-radius: 20rpx;" class=""></image>
						<view style="width: 450rpx;" class="margin-left-xs padding-tb-xs">
							<view class="flex-row-bt ">
								<view class="text-lg">{{item[0].productName}}</view>
								<view class="text-lg theme-color text-bold ">{{item[0].monovalent}}积分</view>
							</view>
							<view class="flex-row-bt text-sm text-low margin-top-lg">
								<view class="">{{item[0].color}} &nbsp;&nbsp; {{item[0].size}}</view>
								<view class="">×{{item[0].productNumber}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="flex-row-bt margin-top-sm">
				<view class="flex-row">
					<text class="text-low text-sm" style="line-height: 50rpx;">总共：</text>
					<text class="text-lg theme-color text-bold ">{{item[0].totalPrice}}积分</text>
				</view>
				<view v-if="item[0].exchangeStatus=='0'" @click="open_pop(item[0].exchangeId)" class="theme-color text-sm border-radius"
					style="border: 1px solid #EE3F4D; padding: 8rpx 26rpx;">
					我要提货
				</view>
<!-- 				<view v-if="item[0].exchangeStatus=='0'" @click="comfirm(item[0].id)"
					class="theme-color text-sm border-radius" style="border: 1px solid #EE3F4D; padding: 8rpx 26rpx;">
					确认收货</view> -->
			</view>
			<uni-popup ref="popupTo" type="center" border-radius="10px 10px 0 0" background-color="#ffffff">
				<view class="bg-white  text-df">
					<view style="text-align: right;" class="padding-xs">
						<uni-icons type="closeempty" size="20" @click="close_pop"></uni-icons>
					</view>
					<view style="text-align: center; padding: 10rpx 60rpx 40rpx;" class="  ">
						<view class="text-bold">
							<text class="margin-right-xs">提货点</text>
							<text class="theme-color ">{{image.exchangeLocation}}提货点</text>
							<!-- <text class="theme-color ">广东省潮州市王辇庄乡车庄子村17栋3243室</text> -->
						</view>
						<view class="text-bold margin-top-lg" style="">提货二维码</view>
						<image style="width: 350rpx; height: 350rpx;" class=""
							:src="imgURL+'/'+ image.exchangeCode">
						</image>
						<view class="text-sm text-mid flex-row" style="justify-content: center;">
							<uni-icons type="close" size="18"></uni-icons>
							<view class="">未提货</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>

		<!-- 分割线 -->
		<divider marginTop="40px" marginBottom="40px"></divider>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue';
	import { onLoad, onReachBottom, onShow } from "@dcloudio/uni-app"
	import store from '../../../store/login';
	import { getExchange } from '../../../api/point/point';
	import { imgURL } from '../../../api/request';
	import { exchange_updateStatus, getExchangeCode } from '../../../api/exchange/exchange';

	//分类
	const select = reactive({
		current: 0,
		show: false,
		list: [{
			name: '全部',
			isLifting: false //是否升降排序
		}, {
			name: '待取',
			isLifting: false //是否升降排序
		}, {
			name: '已取',
			isLifting: false //是否升降排序
		}]
	})

	//列表
	const exchange_list = ref([
	// 	{
	// 	"id": "1",
	// 	"productName": "九阳豆浆机",
	// 	"monovalent": null,
	// 	"productNumber": 2,
	// 	"totalPrice": "1000",
	// 	"userId": null,
	// 	"color": null,
	// 	"size": null,
	// 	"specifications": null,
	// 	"timeSlot": null,
	// 	"timeInterval": null,
	// 	"exchangeStatus": null,
	// 	"createTime": "2024-03-28 16:52",
	// 	"indexImg": "/profile/product/2024/03/28/91dc7a52-8077-44e1-a46e-f33be984c762_20240328142343A002.jpg"
	// },
	])

	//请求参数
	const param = reactive({
		exchangeStatus: '0',
		current: 1,
		size: 6
	})

	onLoad((option) => {
		select.current = parseInt(option.index)
		console.log(option.index)
		select.show = true
		// param.exchangeStatus = select.current.toString()
		// getList()
	})

	onShow(() => {
		param.exchangeStatus = (select.current-1).toString()
		getList()
	})


	const select_change = (e) => {
		console.log(JSON.stringify(e))
		if (e.name == '全部') {
			param.exchangeStatus = ''
		} else if (e.name == '待取') {
			param.exchangeStatus = '0'
		} else {
			param.exchangeStatus = '1'
		}
		getList()
	}

	//请求列表
	const getList = () => {
		param.current = 1
		getExchange(param).then((res : any) => {
			exchange_list.value = res.data.list
			console.log(exchange_list.value,'sakdgkhas')
		})
	}

	//触底刷新
	onReachBottom(() => {
		param.current++
		getExchange(param).then((res : any) => {
			for (let i = 0; i < res.data.list.length; i++) {
				exchange_list.value.push(res.data.list[i])
			}
		})
	})

	//跳转详情
	const to_detail = (id : string) => {
		uni.navigateTo({
			url: '/pages/mines/my_exchange/detail?id=' + id
		})
	}

	//确认收获
	const comfirm = (id : any) => {
		console.log(parseInt(id))
		exchange_updateStatus({
			exchangeId: parseInt(id)
		}).then((res : any) => {
			console.log(JSON.stringify(res))
			if (res.code == 200) {
				uni.showToast({
					title: '收货成功',
					icon: 'none',
					duration: 2000
				});
				getList()
			}
		})
	}
	//弹窗
	let popupTo = ref(null)
	let image = ref({})
	//打开弹出
	const open_pop = (e) => {
		getExchangeCode({exchangeId:e}).then(res =>{
			image.value=res.data
			popupTo.value[0].open()
		})
	}
	//关闭弹窗
	const close_pop = () => {
		popupTo.value[0].close()
	}

</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}
</style>
